<template>
  <div class="card">
    <div class="card-header"></div>
    <slot />
    
    <div class="card-footer"></div>
  </div>
</template>

<script>
export default {
  name: 'Card',
};
</script>

<style scoped lang="scss">

@mixin border($position1, $position2) {
  content: '';
  position: absolute;
  #{$position1}: 0;
  #{$position2}: 0;
  width: 8px;
  height: 8px;
  border-#{$position1}: 1px solid $border-color-2;
  border-#{$position2}: 1px solid $border-color-2;
}

.card {
  position: relative;
  width: 100%;
  height: 172px;
  margin-bottom: 10px;
  border: 1px solid $border-color-1;

  .card-header {
    position: absolute;
    top: 0;
    width: 100%;
    &::before {
      @include border(top, left);
    }
    &::after {
      @include border(top, right);
    }
  }

  .card-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    &::before {
      @include border(bottom, left);
    }
    &::after {
      @include border(bottom, right);
    }
  }
}
</style>